<template>
	<view class="waterfall-item" >
		<image style="border-radius: 10upx 10rpx 0 0;"
			:src="params.coverUrl||'http://static.bsyjk.cn/defaultImage/CD8A6D247BE544AAA7960BA2092299ED.png'"
			mode="widthFix" @load="emitHeight" @error="emitHeight" @tap.stop="collectTap(params,index,'leftList')"></image>
		<view class="content">
			<view class="draft" v-show="params.draft" @tap.stop="collectTap(params,index,'leftList')"></view>
			<view class="draftImage" v-show="params.draft" @tap.stop="collectTap(params,index,'leftList')">
				<image style="width: 42rpx;height: 34rpx;"
					src="http://static.bsyjk.cn/draft/17F16EB9D3764249BDFE39EBAD9C5845.png"></image>
				本地草稿
			</view>
			<view class="demo-title ellipsis" v-show="!params.draft">{{ params.forumTitle}}</view>
			<view class="weui-flex" style="padding-top:10upx;text-align: left;width: 100%;"  v-show="!params.draft">
				<view class="weui-flex__item">
					<view class="placeholder pbllimag">
						<view class="lad-image">
							<u-lazy-load border-radius="50" height="32" img-mode="aspectFill"
								:image="params.avatarUrl">
							</u-lazy-load>
						</view>
						{{params.nickName?params.nickName:''}}
					</view>
				</view>
				<view>
					<view class="placeholder pbllimagr" @tap.stop="upvoteRecord(params)">
						<view class="lad-image">
							<image :src="params.auditStatus == 0?
							'http://static.bsyjk.cn/l/00DEFB77227048C99ECA2910AF17F368.png'
							:'http://static.bsyjk.cn/l/D70DD098C9F64FC6B09C6F994098004D.png'"
								style="width: 30upx;height: 30upx;" mode=""></image>
						</view>
						{{params.upvoteNum}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "helang-waterfall",
		props: {
			params: {
				type: Object,
				default () {
					return {}
				}
			},
			tag: {
				type: String | Number,
				default: ''
			},
			index: {
				type: Number,
				default: -1
			}
		},
		data() {
			return {

			};
		},
		methods: {
			// 删除
			upvoteRecord(item){
				console.log(item)
				let _this = this;
				if(item.auditStatus == 0){
					this.$cms.delete(global.apiUrls.forum+'/'+item.forumId, {}).then(res => {
						if (res.data.code == 1000) {
							uni.showToast({
								title: '删除成功',
								duration: 2000
							});
							uni.$emit('toUpdateFabulous',{
								type:_this.$props.tag,
								index:_this.$props.index,
								deleteForum:true
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					})
				}else{
					// let fdata = {
					// 	topicType:'',
					// 	topicId:item.forumId//主题id
					// },_this = this;
					// if(item.upvoteFlag == 0){
					// 	this.$cms.post(global.apiUrls.upvoteRecord, fdata).then(res => {
					// 		if (res.data.code == 1000) {
					// 			// _this.commentFx(_this.forumId, _this.pageCurrent, _this.pageSize)
					// 		}
					// 	})
					// }else if(item.upvoteFlag == 1){
					// 	this.$cms.delete(global.apiUrls.upvoteRecord, fdata).then(res => {
					// 		if (res.data.code == 1000) {
					// 			// _this.commentFx(_this.forumId, _this.pageCurrent, _this.pageSize)
					// 		}
					// 	})
					// }
				}
				
				
			},
			// 老版本点击事件
			collectTap(item,index,type){
				this.$emit('collectTap',{
					item:item,
					index:this.$props.index,
					type:this.$props.tag
				})
			},
			// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
			emitHeight(e) {
				const query = uni.createSelectorQuery().in(this);
				query.select('.waterfall-item').boundingClientRect(data => {
					let height = Math.floor(data.height);
					this.$emit("height", height, this.$props.tag);
				}).exec();
			},
			onTap(item) {
				if(item.auditStatus == 0){
					this.$cms.delete(global.apiUrls.forum+'/'+item.forumId, {}).then(res => {
						if (res.data.code == 1000) {
							uni.showToast({
								title: '删除成功',
								duration: 2000
							});
							
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					})
				}
				this.$emit("click", this.$props.index, this.$props.tag,params);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.waterfall-item {
		padding: 16rpx;
		background-color: #fff;
		border-radius: 4px;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
		position: relative;
		image {
			display: block;
			width: 100%;
			// 默认设置一个图片的大约值
			height: 350rpx;
		}

		.content {
			margin-top: 16rpx;

			.money {
				color: #fa3534;
				margin-top: 8rpx;
			}

			.label {
				background-color: #fa3534;
				color: #fff;
				font-size: 20rpx;
				padding: 4rpx 16rpx;
				border-radius: 20rpx;
			}

			.shop-name {
				font-size: 20rpx;
				color: #999;
			}
		}
	}

	.draft {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 16rpx;
	}

	.draftImage {
		position: absolute;
		z-index: 999;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-size: 100% 100%;
		color: #fff;

		image {
			display: block;
			margin: 0 auto;
		}
	}
	// 老版本
	.demo-title {
		width: 100%;
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
		word-break: break-all;
		text-align: left;
	}
	.lad-image {
		width: 32upx;
		height: 32upx;
		display: block;
		float: left;
		margin-right: 10upx;
	}
</style>
